<template>
    <div class="app-container">
      <el-row :gutter="15">
        <el-form :model="formData" :rules="rules" ref="elForm" label-width="95px">

          <el-col :span="24">
            <el-form-item label="轮播图标题" prop="ban_name">
              <el-input
                v-model="formData.ban_name"
                placeholder="请输入轮播图标题"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="轮播图片" prop="ban_url">
              <ImageUpload v-model="formData.ban_url" @input="getImgUrl"></ImageUpload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
              </el-form-item>
          </el-col>

        </el-form>
      </el-row>
    </div>
</template>

<script>
    import { getBanner, addBanner, updateBanner } from '@/api/base/banner';
    export default {
        name: "articleForm",
        props: ['keyValue'],
        data() {
          return{
            menuOptions: [],
            formData:{
              ban_name: '',
              ban_url: '',
            },
            rules:{
              ban_name: [{ required: true, message: "栏目名称不能为空", trigger: "blur" }]
            }
          }
        },
        mounted() {
          if(this.keyValue != null) {
            getBanner(this.keyValue).then(res=>{
              this.formData = res.data;
            })
          }
        },
        methods:{
            submitForm() {
              this.$refs["elForm"].validate(valid => {
                if (valid) {
                  if(this.keyValue == null) {
                    addBanner(this.formData).then(res=>{
                      this.commonMsg(res);
                    })
                  } else {
                    updateBanner(this.formData).then(res=>{
                      this.commonMsg(res);
                    })
                  }
                } else {
                  return;
                }
              });
            },
            commonMsg(res) {
              if(res.code == 200) {
                this.$message.success('操作成功!');
                this.$emit('showList');
              } else {
                this.$message.error(res.msg);
              }
            },
            getImgUrl(val) {
                this.formData.ban_url = val;
            },
            // 取消功能
            cancel() {
              this.$emit('closeDiag');
            }
          }
    }
</script>

<style scoped>

</style>
